<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Color List Component</title>
    <style>
        :host {
            display: block;
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .container {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
        }
        .color-box {
            width: 50px;
            height: 50px;
            border: 1px solid #ccc;
            display: inline-block;
        }
        .color-list {
            list-style-type: none;
            padding: 0;
        }
        .color-list li {
            display: flex;
            align-items: center;
            margin-bottom: 5px;
        }
    </style>
</head>
<body>
<dynamic-color-list></dynamic-color-list>

<script>
    class DynamicColorList extends HTMLElement {
        constructor() {
            super();
            // 创建 Shadow DOM 根节点
            const shadow = this.attachShadow({ mode: 'open' });

            // 创建容器元素
            const container = document.createElement('div');
            container.className = 'container';

            // 创建颜色输入框
            const colorInput = document.createElement('input');
            colorInput.type = 'color';
            colorInput.placeholder = 'Enter color code (e.g., #ff0000)';
            colorInput.id = 'color-input';

            // 创建添加按钮
            const addButton = document.createElement('button');
            addButton.textContent = 'Add Color';

            // 创建颜色列表
            const colorList = document.createElement('ul');
            colorList.className = 'color-list';

            // 将元素添加到容器中
            container.appendChild(colorInput);
            container.appendChild(addButton);
            container.appendChild(colorList);

            // 将容器添加到 Shadow DOM 中
            shadow.appendChild(container);

            // 添加事件监听器
            addButton.addEventListener('click', () => {
                const colorCode = colorInput.value.trim();
                if (colorCode) {
                    this.addColorToPalette(colorCode);
                    colorInput.value = ''; // 清空输入框
                }
            });
        }

        addColorToPalette(colorCode) {
            const colorList = this.shadowRoot.querySelector('.color-list');

            // 创建新的列表项
            const listItem = document.createElement('li');

            // 创建颜色方块
            const colorBox = document.createElement('div');
            colorBox.className = 'color-box';
            colorBox.style.backgroundColor = colorCode;

            // 创建颜色代码文本
            const colorText = document.createElement('span');
            colorText.textContent = colorCode;

            // 将颜色方块和文本添加到列表项中
            listItem.appendChild(colorBox);
            listItem.appendChild(colorText);

            // 将列表项添加到颜色列表中
            colorList.appendChild(listItem);
        }
    }

    // 定义新的 HTML 元素
    customElements.define('dynamic-color-list', DynamicColorList);
</script>
</body>
</html>